<template><div><h1 id="常见js代码优化" tabindex="-1"><a class="header-anchor" href="#常见js代码优化" aria-hidden="true">#</a> 常见js代码优化</h1>
<h3 id="声明变量" tabindex="-1"><a class="header-anchor" href="#声明变量" aria-hidden="true">#</a> 声明变量</h3>
<blockquote>
<p>在函数的开头声明赋值变量是一种很好的做法。在同时声明多个变量时，这种速记方法可以为你节省大量时间和空间。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
<span class="token keyword">let</span> x<span class="token punctuation">;</span>
<span class="token keyword">let</span> y<span class="token punctuation">;</span>
<span class="token keyword">let</span> z <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>

<span class="token comment">// 友好写法：</span>
<span class="token keyword">let</span> x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> z<span class="token operator">=</span><span class="token number">3</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="使用三元运算符" tabindex="-1"><a class="header-anchor" href="#使用三元运算符" aria-hidden="true">#</a> 使用三元运算符</h3>
<blockquote>
<p>当你开始使用三元条件而不是使用 if...else 语句时，你的生活会变得更轻松。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
<span class="token keyword">const</span> age <span class="token operator">=</span> <span class="token number">26</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> eligibility<span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>age <span class="token operator">></span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  eligibility <span class="token operator">=</span> <span class="token string">"Allowed"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span><span class="token punctuation">{</span>
  eligibility <span class="token operator">=</span> <span class="token string">"Not Allowed"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 友好写法：</span>
<span class="token keyword">let</span> eligibility <span class="token operator">=</span> <span class="token punctuation">(</span>age <span class="token operator">></span> <span class="token number">18</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token string">"Allowed"</span> <span class="token operator">:</span> <span class="token string">"Not Allowed"</span><span class="token punctuation">;</span>
 
<span class="token comment">// 你还可以像这样嵌套 if 语句：</span>
<span class="token keyword">let</span> eligibility <span class="token operator">=</span> age <span class="token operator">></span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">"greater than 10"</span> <span class="token operator">:</span> <span class="token punctuation">(</span>age <span class="token operator">&lt;</span> <span class="token number">5</span> <span class="token operator">?</span> <span class="token string">"less than 5"</span> <span class="token operator">:</span> <span class="token string">"between 5 and 10"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="优化switch-case判断" tabindex="-1"><a class="header-anchor" href="#优化switch-case判断" aria-hidden="true">#</a> 优化switch-case判断</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">getPrice</span><span class="token punctuation">(</span><span class="token parameter">product</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>product<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">case</span> <span class="token string">"milk"</span><span class="token operator">:</span>
            <span class="token keyword">return</span> <span class="token number">1.5</span><span class="token punctuation">;</span>
        <span class="token keyword">case</span> <span class="token string">"bread"</span><span class="token operator">:</span>
            <span class="token keyword">return</span> <span class="token number">2.5</span><span class="token punctuation">;</span>
        <span class="token keyword">case</span> <span class="token string">"cheese"</span><span class="token operator">:</span>
            <span class="token keyword">return</span> <span class="token number">3.5</span><span class="token punctuation">;</span>
        <span class="token keyword">default</span><span class="token operator">:</span>
            <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">const</span> productMap <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">milk</span><span class="token operator">:</span><span class="token number">1.5</span><span class="token punctuation">,</span>
    <span class="token literal-property property">bread</span><span class="token operator">:</span><span class="token number">2.5</span><span class="token punctuation">,</span>
    <span class="token literal-property property">cheese</span><span class="token operator">:</span><span class="token number">3.5</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">getPrice</span><span class="token punctuation">(</span><span class="token parameter">product</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> productMap<span class="token punctuation">[</span>product<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token number">0</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="提炼函数" tabindex="-1"><a class="header-anchor" href="#提炼函数" aria-hidden="true">#</a> 提炼函数</h3>
<blockquote>
<p>将一段代码提炼到一个独立的函数中，并以这段代码的作用命名。<br>
如果需要花时间浏览一段代码才能弄清楚它到底要干什么，那么这时候就应该将其提炼到一个函数中，并根据它所做的事命名。以后再读这段代码时，一眼就能知道这个函数的用途。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">printOwing</span><span class="token punctuation">(</span><span class="token parameter">invoice</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> outstanding <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"***********************"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"**** Customer Owes ****"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"***********************"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">printOwing</span><span class="token punctuation">(</span><span class="token parameter">invoice</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> outstanding <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token function">printBanner</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">printBanner</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"***********************"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"**** Customer Owes ****"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"***********************"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="提炼变量" tabindex="-1"><a class="header-anchor" href="#提炼变量" aria-hidden="true">#</a> 提炼变量</h3>
<blockquote>
<p>提炼局部变量替换表达式<br>
一个表达式有可能非常复杂且难以阅读。这种情况下， 可以提炼出一个局部变量帮助我们将表达式分解为比较容易管理的形式 ，这样的变量在调试时也很方便。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">price</span><span class="token punctuation">(</span><span class="token parameter">order</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//价格 = 商品原价 - 数量满减价 + 运费</span>
    <span class="token keyword">return</span> order<span class="token punctuation">.</span>quantity <span class="token operator">*</span> order<span class="token punctuation">.</span>price <span class="token operator">-</span>
    Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> order<span class="token punctuation">.</span>quantity <span class="token operator">-</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token operator">*</span> order<span class="token punctuation">.</span>price <span class="token operator">*</span> <span class="token number">0.05</span> <span class="token operator">+</span>
    Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>order<span class="token punctuation">.</span>quantity <span class="token operator">*</span> order<span class="token punctuation">.</span>price <span class="token operator">*</span> <span class="token number">0.1</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">price</span><span class="token punctuation">(</span><span class="token parameter">order</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> basePrice <span class="token operator">=</span> order<span class="token punctuation">.</span>quantity <span class="token operator">*</span> order<span class="token punctuation">.</span>price<span class="token punctuation">;</span>
    <span class="token keyword">const</span> quantityDiscount <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> order<span class="token punctuation">.</span>quantity <span class="token operator">-</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token operator">*</span> order<span class="token punctuation">.</span>price <span class="token operator">*</span> <span class="token number">0.05</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> shipping <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>basePrice <span class="token operator">*</span> <span class="token number">0.1</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> basePrice <span class="token operator">-</span> quantityDiscount <span class="token operator">+</span> shipping<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="函数参数化" tabindex="-1"><a class="header-anchor" href="#函数参数化" aria-hidden="true">#</a> 函数参数化</h3>
<blockquote>
<p>以参数的形式传入不同的值，消除重复函数<br>
如果发现两个函数逻辑非常相似， 只有一些字面量值不同， 可以将其合并成一个函数， 以参数的形式传入不同的值， 从而消除重复。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>

<span class="token comment">// 点击异常项</span>
<span class="token function">clickFaultsItem</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">url</span><span class="token operator">:</span><span class="token string">'xxx'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">params</span><span class="token operator">:</span><span class="token punctuation">{</span>
            <span class="token literal-property property">id</span><span class="token operator">:</span> item<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'异常'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 点击正常项</span>
<span class="token function">clickNormalItem</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">url</span><span class="token operator">:</span><span class="token string">'xxx'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">params</span><span class="token operator">:</span><span class="token punctuation">{</span>
            <span class="token literal-property property">id</span><span class="token operator">:</span> item<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
            <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'正常'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token function">clickItem</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
     <span class="token keyword">this</span><span class="token punctuation">.</span>$u<span class="token punctuation">.</span><span class="token function">route</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">url</span><span class="token operator">:</span><span class="token string">'xxx'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">params</span><span class="token operator">:</span><span class="token punctuation">{</span>id<span class="token punctuation">,</span> type<span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="使用策略模式替换-胖-分支" tabindex="-1"><a class="header-anchor" href="#使用策略模式替换-胖-分支" aria-hidden="true">#</a> 使用策略模式替换“胖”分支</h3>
<blockquote>
<p>使用策略模式替换“胖胖”的if-else或者switch-case<br>
当if-else或者switch-case分支过多时可以使用策略模式将各个分支独立出来</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">getPrice</span><span class="token punctuation">(</span><span class="token parameter">tag<span class="token punctuation">,</span> originPrice</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 新人价格</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>tag <span class="token operator">===</span> <span class="token string">'newUser'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> originPrice <span class="token operator">></span> <span class="token number">50.1</span> <span class="token operator">?</span> originPrice <span class="token operator">-</span> <span class="token number">50</span> <span class="token operator">:</span> originPrice
    <span class="token punctuation">}</span>
    <span class="token comment">// 返场价格</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>tag <span class="token operator">===</span> <span class="token string">'back'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">return</span> originPrice <span class="token operator">></span> <span class="token number">200</span> <span class="token operator">?</span> originPrice <span class="token operator">-</span> <span class="token number">50</span> <span class="token operator">:</span> originPrice
    <span class="token punctuation">}</span>
    <span class="token comment">// 活动价格</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>tag <span class="token operator">===</span> <span class="token string">'activity'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> originPrice <span class="token operator">></span> <span class="token number">300</span> <span class="token operator">?</span> originPrice <span class="token operator">-</span> <span class="token number">100</span> <span class="token operator">:</span> originPrice
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">const</span> priceHandler <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">newUser</span><span class="token punctuation">(</span><span class="token parameter">originPrice</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> originPrice <span class="token operator">></span> <span class="token number">50.1</span> <span class="token operator">?</span> originPrice <span class="token operator">-</span> <span class="token number">50</span> <span class="token operator">:</span> originPrice
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">back</span><span class="token punctuation">(</span><span class="token parameter">originPrice</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> originPrice <span class="token operator">></span> <span class="token number">200</span> <span class="token operator">?</span> originPrice <span class="token operator">-</span> <span class="token number">50</span> <span class="token operator">:</span> originPrice
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">activity</span><span class="token punctuation">(</span><span class="token parameter">originPrice</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
         <span class="token keyword">return</span> originPrice <span class="token operator">></span> <span class="token number">300</span> <span class="token operator">?</span> originPrice <span class="token operator">-</span> <span class="token number">100</span> <span class="token operator">:</span> originPrice
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">getPrice</span><span class="token punctuation">(</span><span class="token parameter">tag<span class="token punctuation">,</span> originPrice</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> priceHandler<span class="token punctuation">[</span>tag<span class="token punctuation">]</span><span class="token punctuation">(</span>originPrice<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="内联变量" tabindex="-1"><a class="header-anchor" href="#内联变量" aria-hidden="true">#</a> 内联变量</h3>
<blockquote>
<p>用变量右侧表达式消除变量，这是提炼变量的逆操作<br>
当变量名字并不比表达式本身更具表现力时可以采取该方法</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">let</span> basePrice <span class="token operator">=</span> anOrder<span class="token punctuation">.</span>basePrice<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>basePrice <span class="token operator">></span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">return</span> anOrder<span class="token punctuation">.</span>basePrice <span class="token operator">></span> <span class="token number">1000</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="封装变量" tabindex="-1"><a class="header-anchor" href="#封装变量" aria-hidden="true">#</a> 封装变量</h3>
<blockquote>
<p>将变量封装起来，只允许通过函数访问<br>
对于所有可变的数据， 只要它的作用域超出单个函数，就可以采用封装变量的方法。数据被使用得越广， 就越是值得花精力给它一个体面的封装。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">let</span> defaultOwner <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">"Martin"</span><span class="token punctuation">,</span> <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">"Fowler"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 访问</span>
spaceship<span class="token punctuation">.</span>owner <span class="token operator">=</span> defaultOwner<span class="token punctuation">;</span>
<span class="token comment">// 赋值</span>
defaultOwner <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">"Rebecca"</span><span class="token punctuation">,</span> <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">"Parsons"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">getDefaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> defaultOwner<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">setDefaultOwner</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>defaultOwner <span class="token operator">=</span> arg<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">// 访问</span>
spaceship<span class="token punctuation">.</span>owner <span class="token operator">=</span> <span class="token function">getDefaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 赋值</span>
<span class="token function">setDefaultOwner</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">"Rebecca"</span><span class="token punctuation">,</span> <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">"Parsons"</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="拆分阶段" tabindex="-1"><a class="header-anchor" href="#拆分阶段" aria-hidden="true">#</a> 拆分阶段</h3>
<blockquote>
<p>把一大段行为拆分成多个顺序执行的阶段<br>
当看见一段代码在同时处理两件不同的事， 可以把它拆分成各自独立的模块， 因为这样到了需要修改的时候， 就可以单独处理每个模块。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">priceOrder</span><span class="token punctuation">(</span><span class="token parameter">product<span class="token punctuation">,</span> quantity<span class="token punctuation">,</span> shippingMethod</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> basePrice <span class="token operator">=</span> product<span class="token punctuation">.</span>basePrice <span class="token operator">*</span> quantity<span class="token punctuation">;</span>
    
    <span class="token keyword">const</span> discount <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>quantity <span class="token operator">-</span> product<span class="token punctuation">.</span>discountThreshold<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token operator">*</span> product<span class="token punctuation">.</span>basePrice <span class="token operator">*</span> product<span class="token punctuation">.</span>discountRate<span class="token punctuation">;</span>
    
    <span class="token keyword">const</span> shippingPerCase <span class="token operator">=</span> <span class="token punctuation">(</span>basePrice <span class="token operator">></span> shippingMethod<span class="token punctuation">.</span>discountThreshold<span class="token punctuation">)</span>
    <span class="token operator">?</span> shippingMethod<span class="token punctuation">.</span>discountedFee <span class="token operator">:</span> shippingMethod<span class="token punctuation">.</span>feePerCase<span class="token punctuation">;</span>
    
    <span class="token keyword">const</span> shippingCost <span class="token operator">=</span> quantity <span class="token operator">*</span> shippingPerCase<span class="token punctuation">;</span>
    
    <span class="token keyword">const</span> price <span class="token operator">=</span> basePrice <span class="token operator">-</span> discount <span class="token operator">+</span> shippingCost<span class="token punctuation">;</span>
    <span class="token keyword">return</span> price<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/*
该例中前两行代码根据商品信息计算订单中与商品相关的价格， 随后的两行则根据配送信息计算配送成本。
将这两块逻辑相对独立后，后续如果修改价格和配送的计算逻辑则只需修改对应模块即可。
*/</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">priceOrder</span><span class="token punctuation">(</span><span class="token parameter">product<span class="token punctuation">,</span> quantity<span class="token punctuation">,</span> shippingMethod</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> priceData <span class="token operator">=</span> <span class="token function">calculatePricingData</span><span class="token punctuation">(</span>product<span class="token punctuation">,</span> quantity<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">applyShipping</span><span class="token punctuation">(</span>priceData<span class="token punctuation">,</span> shippingMethod<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 计算商品价格</span>
<span class="token keyword">function</span> <span class="token function">calculatePricingData</span><span class="token punctuation">(</span><span class="token parameter">product<span class="token punctuation">,</span> quantity</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> basePrice <span class="token operator">=</span> product<span class="token punctuation">.</span>basePrice <span class="token operator">*</span> quantity<span class="token punctuation">;</span>
    <span class="token keyword">const</span> discount <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>quantity <span class="token operator">-</span> product<span class="token punctuation">.</span>discountThreshold<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token operator">*</span> product<span class="token punctuation">.</span>basePrice <span class="token operator">*</span> product<span class="token punctuation">.</span>discountRate<span class="token punctuation">;</span>
    
    <span class="token keyword">return</span> <span class="token punctuation">{</span>basePrice<span class="token punctuation">,</span> quantity<span class="token punctuation">,</span> discount<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 计算配送价格</span>
<span class="token keyword">function</span> <span class="token function">applyShipping</span><span class="token punctuation">(</span><span class="token parameter">priceData<span class="token punctuation">,</span> shippingMethod</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> shippingPerCase <span class="token operator">=</span> <span class="token punctuation">(</span>priceData<span class="token punctuation">.</span>basePrice <span class="token operator">></span> shippingMethod<span class="token punctuation">.</span>discountThreshold<span class="token punctuation">)</span>
    <span class="token operator">?</span> shippingMethod<span class="token punctuation">.</span>discountedFee <span class="token operator">:</span> shippingMethod<span class="token punctuation">.</span>feePerCase<span class="token punctuation">;</span>
    <span class="token keyword">const</span> shippingCost <span class="token operator">=</span> priceData<span class="token punctuation">.</span>quantity <span class="token operator">*</span> shippingPerCase<span class="token punctuation">;</span>
    
    <span class="token keyword">return</span> priceData<span class="token punctuation">.</span>basePrice <span class="token operator">-</span> priceData<span class="token punctuation">.</span>discount <span class="token operator">+</span> shippingCost<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="拆分循环" tabindex="-1"><a class="header-anchor" href="#拆分循环" aria-hidden="true">#</a> 拆分循环</h3>
<blockquote>
<p>将一个循环拆分成多个循环<br>
当遇到一个身兼数职的循环时可以将循环拆解，让一个循环只做一件事情， 那就能确保每次修改时你只需要理解要修改的那块代码的行为就可以了。该行为可能会被质疑，因为它会迫使你执行两次甚至多次循环，实际情况是，即使处理的列表数据更多一些，循环本身也很少成为性能瓶颈，更何况拆分出循环来通常还使一些更强大的优化手段变得可能。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">10000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">15000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">18000</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

<span class="token keyword">let</span> youngest <span class="token operator">=</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">?</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>age <span class="token operator">:</span> <span class="token number">Infinity</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> totalSalary <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 查找最年轻的人员</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>p<span class="token punctuation">.</span>age <span class="token operator">&lt;</span> youngest<span class="token punctuation">)</span> youngest <span class="token operator">=</span> p<span class="token punctuation">.</span>age<span class="token punctuation">;</span>
    <span class="token comment">// 计算总薪水</span>
    totalSalary <span class="token operator">+=</span> p<span class="token punctuation">.</span>salary<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">youngestAge: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>youngest<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, totalSalary: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>totalSalary<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">10000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">15000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">18000</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

<span class="token keyword">let</span> totalSalary <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 只计算总薪资</span>
    totalSalary <span class="token operator">+=</span> p<span class="token punctuation">.</span>salary<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> youngest <span class="token operator">=</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">?</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>age <span class="token operator">:</span> <span class="token number">Infinity</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 只查找最年轻的人员</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>p<span class="token punctuation">.</span>age <span class="token operator">&lt;</span> youngest<span class="token punctuation">)</span> youngest <span class="token operator">=</span> p<span class="token punctuation">.</span>age<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">youngestAge: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>youngest<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, totalSalary: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>totalSalary<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ==================提炼函数==================</span>
<span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">10000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">15000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">18000</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">youngestAge: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">youngestAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, totalSalary: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">totalSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">totalSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> totalSalary <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        totalSalary <span class="token operator">+=</span> p<span class="token punctuation">.</span>salary<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> totalSalary<span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
<span class="token keyword">function</span> <span class="token function">youngestAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> youngest <span class="token operator">=</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">?</span> people<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>age <span class="token operator">:</span> <span class="token number">Infinity</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p<span class="token punctuation">.</span>age <span class="token operator">&lt;</span> youngest<span class="token punctuation">)</span> youngest <span class="token operator">=</span> p<span class="token punctuation">.</span>age<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> youngest<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================使用工具类进一步优化==================</span>
<span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">10000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">15000</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token literal-property property">salary</span><span class="token operator">:</span> <span class="token number">18000</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">youngestAge: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">youngestAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, totalSalary: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">totalSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">totalSalary</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> people<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span>p</span><span class="token punctuation">)</span> <span class="token operator">=></span> total <span class="token operator">+</span> p<span class="token punctuation">.</span>salary<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">youngestAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token operator">...</span>people<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">p</span> <span class="token operator">=></span> p<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="拆分变量" tabindex="-1"><a class="header-anchor" href="#拆分变量" aria-hidden="true">#</a> 拆分变量</h3>
<blockquote>
<p>将一个变量拆分成两个或多个变量<br>
如果变量承担多个责任， 它就应该被替换为多个变量， 每个变量只承担一个责任。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">let</span> temp <span class="token operator">=</span> <span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span>height <span class="token operator">+</span> width<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>temp<span class="token punctuation">)</span><span class="token punctuation">;</span>
temp <span class="token operator">=</span> height <span class="token operator">*</span> width<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>temp<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">const</span> perimeter <span class="token operator">=</span> <span class="token number">2</span> <span class="token operator">*</span> <span class="token punctuation">(</span>height <span class="token operator">+</span> width<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>perimeter<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> area <span class="token operator">=</span> height <span class="token operator">*</span> width<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>area<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="分解条件表达式" tabindex="-1"><a class="header-anchor" href="#分解条件表达式" aria-hidden="true">#</a> 分解条件表达式</h3>
<blockquote>
<p>将条件表达式提炼成函数.<br>
在带有复杂条件逻辑的函数中，往往可以将原函数中对应的代码改为调用新函数。
对于条件逻辑， 将每个分支条件分解成新函数可以带来的好处：<br>
 <strong>提高可读性</strong><br>
 <strong>可以突出条件逻辑， 更清楚地表明每个分支的作用</strong><br>
 <strong>突出每个分支的原因</strong></p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token comment">// 计算一件商品的总价，该商品在冬季和夏季的单价是不同的</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isBefore</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerStart<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isAfter</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerEnd<span class="token punctuation">)</span><span class="token punctuation">)</span>
charge <span class="token operator">=</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>summerRate<span class="token punctuation">;</span>
<span class="token keyword">else</span>
charge <span class="token operator">=</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>regularRate <span class="token operator">+</span> plan<span class="token punctuation">.</span>regularServiceCharge<span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">summer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    charge <span class="token operator">=</span> <span class="token function">summerCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">else</span>
    charge <span class="token operator">=</span> <span class="token function">regularCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">summer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isBefore</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerStart<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isAfter</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerEnd<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">summerCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>summerRate<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">regularCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>regularRate <span class="token operator">+</span> plan<span class="token punctuation">.</span>regularServiceCharge<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 进一步优化（使用三元运算符）</span>
charge <span class="token operator">=</span> <span class="token function">summer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">summerCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">regularCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">summer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isBefore</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerStart<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>aDate<span class="token punctuation">.</span><span class="token function">isAfter</span><span class="token punctuation">(</span>plan<span class="token punctuation">.</span>summerEnd<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">summerCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>summerRate<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">regularCharge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> quantity <span class="token operator">*</span> plan<span class="token punctuation">.</span>regularRate <span class="token operator">+</span> plan<span class="token punctuation">.</span>regularServiceCharge<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="合并条件表达式" tabindex="-1"><a class="header-anchor" href="#合并条件表达式" aria-hidden="true">#</a> 合并条件表达式</h3>
<blockquote>
<p>将多个条件表达式合并<br>
当发现这样一串条件检查：检查条件各不相同， 最终行为却一致。如果发现这种情况，就应该使用“逻辑或”和“逻辑与”将它们合并为一个条件表达式。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>seniority <span class="token operator">&lt;</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>monthsDisabled <span class="token operator">></span> <span class="token number">12</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>isPartTime<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isNotEligableForDisability</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">isNotEligableForDisability</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>seniority <span class="token operator">&lt;</span> <span class="token number">2</span><span class="token punctuation">)</span>
            <span class="token operator">||</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>monthsDisabled <span class="token operator">></span> <span class="token number">12</span><span class="token punctuation">)</span>
            <span class="token operator">||</span> <span class="token punctuation">(</span>anEmployee<span class="token punctuation">.</span>isPartTime<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="以卫语句取代嵌套条件表达式" tabindex="-1"><a class="header-anchor" href="#以卫语句取代嵌套条件表达式" aria-hidden="true">#</a> 以卫语句取代嵌套条件表达式</h3>
<blockquote>
<p>如果某个条件极其罕见，就应该单独检查该条件，并在该条件为真时立刻从函数中返回。这样的单独检查常常被称为“卫语句”（guard clauses）。<br>
如果使用if-else结构，你对if分支和else分支的重视是同等的。这样的代码结构传递给阅读者的消息就是：各个分支有同样的重要性。卫语句就不同了，它告诉阅读者：“这种情况不是本函数的核心逻辑所关心的， 如果它真发生了，请做一些必要的整理工作，然后退出。” 为了传递这种信息可以使用卫语句替换嵌套结构.</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">payAmount</span><span class="token punctuation">(</span><span class="token parameter">employee</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> result<span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>employee<span class="token punctuation">.</span>isSeparated<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        result <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">amount</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">reasonCode</span><span class="token operator">:</span><span class="token string">"SEP"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>employee<span class="token punctuation">.</span>isRetired<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            result <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">amount</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">reasonCode</span><span class="token operator">:</span> <span class="token string">"RET"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">else</span> <span class="token punctuation">{</span>
            result <span class="token operator">=</span> <span class="token function">someFinalComputation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">payAmount</span><span class="token punctuation">(</span><span class="token parameter">employee</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>employee<span class="token punctuation">.</span>isSeparated<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token literal-property property">amount</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">reasonCode</span><span class="token operator">:</span> <span class="token string">"SEP"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>employee<span class="token punctuation">.</span>isRetired<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token literal-property property">amount</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">reasonCode</span><span class="token operator">:</span> <span class="token string">"RET"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token function">someFinalComputation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="将查询函数和修改函数分离" tabindex="-1"><a class="header-anchor" href="#将查询函数和修改函数分离" aria-hidden="true">#</a> 将查询函数和修改函数分离</h3>
<blockquote>
<p>将查询动作从修改动作中分离出来的方式<br>
如果遇到一个“既有返回值又有副作用”的函数，此时可以将查询动作从修改动作中分离出来。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// ==================重构前==================</span>
<span class="token keyword">function</span> <span class="token function">alertForMiscreant</span> <span class="token punctuation">(</span><span class="token parameter">people</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p <span class="token operator">===</span> <span class="token string">"Don"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">setOffAlarms</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token string">"Don"</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p <span class="token operator">===</span> <span class="token string">"John"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">setOffAlarms</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token string">"John"</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token string">""</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 调用方</span>
<span class="token keyword">const</span> found <span class="token operator">=</span> <span class="token function">alertForMiscreant</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// ==================重构后==================</span>
<span class="token keyword">function</span> <span class="token function">findMiscreant</span> <span class="token punctuation">(</span><span class="token parameter">people</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> p <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p <span class="token operator">===</span> <span class="token string">"Don"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token string">"Don"</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>p <span class="token operator">===</span> <span class="token string">"John"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token string">"John"</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token string">""</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">alertForMiscreant</span> <span class="token punctuation">(</span><span class="token parameter">people</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">findMiscreant</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token function">setOffAlarms</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 调用方</span>
<span class="token keyword">const</span> found <span class="token operator">=</span> <span class="token function">findMiscreant</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alertForMiscreant</span><span class="token punctuation">(</span>people<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="javascript-for-循环" tabindex="-1"><a class="header-anchor" href="#javascript-for-循环" aria-hidden="true">#</a> JavaScript For 循环</h3>
<blockquote>
<p>如果你想要纯JavaScript 并且不想依赖诸如 jQuery 或 lodash 之类的外部库，那么这个小技巧非常有用。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
<span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'mango'</span><span class="token punctuation">,</span> <span class="token string">'peach'</span><span class="token punctuation">,</span> <span class="token string">'banana'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> fruits<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span>

<span class="token comment">// 友好写法：</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> item <span class="token keyword">of</span> fruits<span class="token punctuation">)</span> <span class="token comment">//mango     peach    banana</span>
  
<span class="token comment">// 如果你只想访问索引，请执行以下操作：</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token keyword">in</span> fruits<span class="token punctuation">)</span>  <span class="token comment">//0   1    2</span>
  
<span class="token comment">// 如果你想访问文字对象中的键，这也适用：</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">continent</span><span class="token operator">:</span> <span class="token string">'Africa'</span><span class="token punctuation">,</span> <span class="token literal-property property">country</span><span class="token operator">:</span> <span class="token string">'Kenya'</span><span class="token punctuation">,</span> <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">'Nairobi'</span><span class="token punctuation">}</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> obj<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token comment">// continent   country   city</span>
  
<span class="token comment">// Array.forEach 的简写： </span>
<span class="token keyword">function</span> <span class="token function">logArrayElements</span><span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> index<span class="token punctuation">,</span> array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a["</span> <span class="token operator">+</span> index <span class="token operator">+</span> <span class="token string">"] = "</span> <span class="token operator">+</span> element<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>logArrayElements<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// a[0] = 5</span>
<span class="token comment">// a[1] = 7</span>
<span class="token comment">// a[2] = 2  </span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="数组查找" tabindex="-1"><a class="header-anchor" href="#数组查找" aria-hidden="true">#</a> 数组查找</h3>
<blockquote>
<p>如果你曾经负责用纯 JavaScript 编写 find 函数，你可能会使用 for 循环。在 ES6 中，引入了一个名为 find() 的新数组函数</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法</span>
<span class="token keyword">const</span> pets <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'Dog'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Max'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'Cat'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Karl'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'Dog'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Tommy'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
<span class="token keyword">function</span> <span class="token function">findDog</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>pets<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>pets<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'Dog'</span> <span class="token operator">&amp;&amp;</span> pets<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name <span class="token operator">===</span> name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> pets<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 友好写法：</span>
pet <span class="token operator">=</span> pets<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">pet</span> <span class="token operator">=></span> pet<span class="token punctuation">.</span>type <span class="token operator">===</span><span class="token string">'Dog'</span> <span class="token operator">&amp;&amp;</span> pet<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'Tommy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pet<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { type: 'Dog', name: 'Tommy' }</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="十进制指数" tabindex="-1"><a class="header-anchor" href="#十进制指数" aria-hidden="true">#</a> 十进制指数</h3>
<blockquote>
<p>你可能已经看到了这个。它本质上是一种不带尾随零的数字书写方式。例如，1e5 实质上意味着 1 后跟 5 个零。它表示一个等于 1,00,000 的十进制基数（JavaScript 将其解释为浮点类型）。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10000</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">// 友好写法：</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">1e7</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">// All the below will evaluate to true</span>
<span class="token number">1e0</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token number">1e1</span> <span class="token operator">===</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token number">1e2</span> <span class="token operator">===</span> <span class="token number">100</span><span class="token punctuation">;</span>
<span class="token number">1e3</span> <span class="token operator">===</span> <span class="token number">1000</span><span class="token punctuation">;</span>
<span class="token number">1e4</span> <span class="token operator">===</span> <span class="token number">10000</span><span class="token punctuation">;</span>
<span class="token number">1e5</span> <span class="token operator">===</span> <span class="token number">100000</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="短路评估" tabindex="-1"><a class="header-anchor" href="#短路评估" aria-hidden="true">#</a> 短路评估</h3>
<blockquote>
<p>如果预期的参数为空或未定义，则无需编写五六行代码来分配默认值，我们可以简单地使用短路逻辑运算符并仅用一行代码完成相同的事情。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
<span class="token keyword">let</span> dbHost<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">DB</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  dbHost <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">DB</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  dbHost <span class="token operator">=</span> <span class="token string">'127.0.0.1'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 友好写法：</span>
<span class="token keyword">const</span> dbHost <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">DB</span> <span class="token operator">||</span> <span class="token string">'127.0.0.1'</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="对象属性" tabindex="-1"><a class="header-anchor" href="#对象属性" aria-hidden="true">#</a> 对象属性</h3>
<blockquote>
<p>在 JavaScript 中定义对象字面量让生活变得更轻松。ES6 提供了一种更简单的方法来为对象分配属性。如果变量名称与对象键相同，则可以利用速记符号</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">2020</span><span class="token punctuation">,</span> y <span class="token operator">=</span> <span class="token number">2021</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span>x<span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span>y <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 友好写法：</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token punctuation">,</span> y <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="隐式回报" tabindex="-1"><a class="header-anchor" href="#隐式回报" aria-hidden="true">#</a> 隐式回报</h3>
<blockquote>
<p>return 是我们经常使用的关键字，用于返回函数的最终结果。带有单个语句的箭头函数将隐式返回其计算结果（该函数必须省略大括号 ({}) 以省略 return 关键字）。<br>
要返回多行语句（例如对象字面量），必须使用 () 而不是 {} 来包装函数体。这确保代码被评估为单个语句。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
<span class="token keyword">function</span> <span class="token function">calcCircumference</span><span class="token punctuation">(</span><span class="token parameter">diameter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">*</span> diameter
<span class="token punctuation">}</span>

<span class="token comment">// 友好写法：</span>
<span class="token function-variable function">calcCircumference</span> <span class="token operator">=</span> <span class="token parameter">diameter</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
  Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">*</span> diameter<span class="token punctuation">;</span>
<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="按位索引" tabindex="-1"><a class="header-anchor" href="#按位索引" aria-hidden="true">#</a> 按位索引</h3>
<blockquote>
<p>使用数组执行查找时，indexOf() 函数用于检索你要查找的项目的位置。如果未找到该项目，则返回值 -1。在 JavaScript 中，0 被认为是“假的”，而大于或小于 0 的数字被认为是“真”的。因此，必须像这样编写正确的代码。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Confirm item IS found</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Confirm item IS NOT found</span>
<span class="token punctuation">}</span>

<span class="token comment">// 友好写法：</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">~</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Confirm item IS found</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token operator">~</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Confirm item IS NOT found</span>
<span class="token punctuation">}</span>

<span class="token comment">// 按位（~）运算符将返回除 -1 以外的任何值的真值。否定它就像！~一样简单。或者，我们也可以使用 includes() 函数：</span>

<span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Returns true if the item exists, false //if it doesn't</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="将数组转换为对象" tabindex="-1"><a class="header-anchor" href="#将数组转换为对象" aria-hidden="true">#</a> 将数组转换为对象</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>arr <span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token comment">// {0: "foo", 1: "bar", 2: 1}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="删除array中的重复项" tabindex="-1"><a class="header-anchor" href="#删除array中的重复项" aria-hidden="true">#</a> 删除Array中的重复项</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// Set 对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。</span>

<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'c'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'d'</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newArr<span class="token punctuation">)</span> <span class="token comment">// ["a", "b", "c", "d"]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="double-bitwise-not-速记" tabindex="-1"><a class="header-anchor" href="#double-bitwise-not-速记" aria-hidden="true">#</a> Double Bitwise NOT 速记</h3>
<blockquote>
<p>按位运算符是你在 JavaScript 初学者教程中学到的功能之一，而且，你永远无法在任何地方实现它们。同意吗？此外，如果你不处理二进制，谁愿意使用 1 和 0？
然而，双位非运算符有一个非常实用的用例。你可以将其用作 Math.floor() 的替代品。Double Bitwise NOT 运算符的优点是它执行相同操作的速度要快得多。您可以在此处阅读有关按位运算符的更多信息。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token number">4.9</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">4</span>  <span class="token comment">//true</span>

<span class="token comment">//友好写法：</span>
<span class="token operator">~</span><span class="token operator">~</span><span class="token number">4.9</span> <span class="token operator">===</span> <span class="token number">4</span>  <span class="token comment">//true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="交换两个变量" tabindex="-1"><a class="header-anchor" href="#交换两个变量" aria-hidden="true">#</a> 交换两个变量</h3>
<blockquote>
<p>为了交换两个变量，我们经常使用第三个变量。但是它可以通过数组解构赋值轻松完成。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 不友好写法：</span>
<span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token string">"rakshit"</span><span class="token punctuation">,</span> y <span class="token operator">=</span> <span class="token string">"shah"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> temp <span class="token operator">=</span> x<span class="token punctuation">;</span>
x <span class="token operator">=</span> y<span class="token punctuation">;</span>
y <span class="token operator">=</span> temp<span class="token punctuation">;</span>

<span class="token comment">// 友好写法：</span>
<span class="token punctuation">[</span>x<span class="token punctuation">,</span>y<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>y<span class="token punctuation">,</span>x<span class="token punctuation">]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="array-flat" tabindex="-1"><a class="header-anchor" href="#array-flat" aria-hidden="true">#</a> Array.flat</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 有一个二维数组，我想让他变成一维数组：</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [ 1, 2, 3, 4, 5, 6 ]</span>

<span class="token comment">// 还可以传参数，参数为降维的次数</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">[</span>
  <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span>
  <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span>
<span class="token punctuation">]</span>

<span class="token comment">// 如果传的是一个无限大的数字，那么就实现了多维数组(无论几维)降为一维数组</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">[</span>
   <span class="token number">1</span><span class="token punctuation">,</span>  <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span>  <span class="token number">5</span><span class="token punctuation">,</span>
   <span class="token number">6</span><span class="token punctuation">,</span>  <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span>
   <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span>
<span class="token punctuation">]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="date对象的相关知识点" tabindex="-1"><a class="header-anchor" href="#date对象的相关知识点" aria-hidden="true">#</a> Date对象的相关知识点</h3>
<blockquote>
<p>获取当前时间毫秒值</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 方式一</span>
Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1606381881650</span>
<span class="token comment">// 方式二</span>
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// 1606381881650</span>
<span class="token comment">// 方式三</span>
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 1606381881650</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>创建Date对象的兼容性问题。</p>
</blockquote>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// window和安卓支持，ios和mac不支持</span>
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2020-11-26'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 

<span class="token comment">// window和安卓支持，ios和mac支持</span>
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">'2020/11/26'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="数字分隔符" tabindex="-1"><a class="header-anchor" href="#数字分隔符" aria-hidden="true">#</a> 数字分隔符</h2>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 有时你会在文件中定义一个数字常量</span>
<span class="token keyword">const</span> myMoney <span class="token operator">=</span> <span class="token number">1000000000000</span>

<span class="token comment">// 这么多个 0 ，1、2 ... 6、7 ... 数晕了都，怎么办？</span>
数字分隔符整起来！
<span class="token keyword">const</span> myMoney <span class="token operator">=</span> <span class="token number">1_000_000_000_000</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>myMoney<span class="token punctuation">)</span>  <span class="token comment">// 1000000000000</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


